<template>
  <div class="swiper">
    <swiper :options="swiperOption">
      <!-- 轮播图 -->
      <swiper-slide
       v-for="item in swiperList" 
       :key="item.id"
       >
          <img :src="item.imgUrl">
       </swiper-slide>
    </swiper>
       <!-- 小圆点 -->
       <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {swiper, swiperSlide},
  props:{
    swiperList:Array,
  },
  data() {
    return {
      swiperOption: {//swiper3
        loop:true,
        autoplay:{
          delay:3000,
          disableOninteraction:false
        },
        speed: 1000,
        pagination:{
          el:'.swiper-pagination',
          }
      },
    }
  },

}
</script>

<style lang="scss" scoped>
.swiper {
  width:100%;
  height:4.4rem;
  position:relative;
}
.swiper-container{
    width:100%;
    height:4.4rem;
}
.swiper img{
  width:100%;
  height:4.4rem;
}
.swiper-pagination{
  width:100%;
  bottom:0;
}
::v-deep .swiper-pagination-bullet-active{
  background-color: #b0352f;
}
::v-deep .swiper-pagination-bullet{
  margin:0 0.08rem;
}

</style>